<template>
  <div>

    <el-row class="bread-nav">
      <ul class="bread-nav-title">
        <span>降赔</span>
      </ul>
      <ul class="bread-nav-title-right">
        <button @click="getLimits">
          刷新
        </button>
      </ul>
    </el-row>

    <div class="content" v-if="KKlimitsInfoList">
      <div>
        <el-row class="content-info-nav">
          <button v-for="(item, index) in lotteryType" :key="index" class="content-info-nav-button lotteryBtn" :class="currtType === item?'lotteryTypeBtn':'lotteryTypeSelected'">
            {{item}}
          </button>
          <hr/>
        </el-row>
      </div>

      <div v-for="(list,index) in KKlimitsInfoList" :key="index" class="content-info" :class="index===0?'content-info-first-child':''" v-if="currtType === '快开彩'">
        <el-row class="content-info-nav">
          <button class="content-info-nav-button">
            {{KKlotteryTypeInfo[index].title}}
          </button>
        </el-row>
        <table class="myTable">
          <thead>
          <tr>
            <th colspan="2">
              玩法
            </th>
            <th>
              额度
            </th>
            <th>
              自动降赔值
            </th>
            <th>
              固定赔差
            </th>
            <th>
              最大降赔值
            </th>
            <th>
              最高赔率
            </th>
          </tr>
          </thead>
          <tbody>
          <template v-for="(subList,subIndex) in list">
          <tr v-for="(item,subIndex1) in subList" :key="item.item_id">
            <td class="specificTableTd" v-if="subIndex1 === 0" :rowspan="subList.length">
              {{KKlotteryTypeInfo[index].subTitle[subIndex].title}}
            </td>
            <td>{{item.name?item.name:'--'}}</td>
            <td v-if="subIndex1 === 0" :rowspan="subList.length">
              <input type="text" @change="changeCellInput(1, item.game, item.item_id, 1, KKlotteryTypeInfo[index].subTitle[subIndex].title, KKlotteryTypeInfo[index].title, item.name, item.real_amount)"
                     :beforedate="beforeKKlimitsInfoList[index][subIndex][subIndex1].real_amount" v-model="item.real_amount" :class="{'change':beforeKKlimitsInfoList[index][subIndex][subIndex1].real_amount != item.real_amount}"/>
            </td>
            <td><input type="text" v-model="item.reduce_unit"
                       @change="changeCellInput(1, item.game, item.item_id, 2, KKlotteryTypeInfo[index].subTitle[subIndex].title, KKlotteryTypeInfo[index].title, item.name, item.reduce_unit)"
                       :beforedate="beforeKKlimitsInfoList[index][subIndex][subIndex1].reduce_unit" :class="{'change':beforeKKlimitsInfoList[index][subIndex][subIndex1].reduce_unit != item.reduce_unit}"/>
            </td>
            <td><input type="text" v-model="item.base_odds" disabled
                       @change="changeCellInput(1, item.game, item.item_id, 3, KKlotteryTypeInfo[index].subTitle[subIndex].title, KKlotteryTypeInfo[index].title, item.name, item.base_odds)"
                       :beforedate="beforeKKlimitsInfoList[index][subIndex][subIndex1].base_odds" :class="{'change':beforeKKlimitsInfoList[index][subIndex][subIndex1].base_odds != item.base_odds}"/>
            </td>
            <td><input type="text" v-model="item.max_reduce"
                       @change="changeCellInput(1, item.game, item.item_id, 4, KKlotteryTypeInfo[index].subTitle[subIndex].title, KKlotteryTypeInfo[index].title, item.name, item.max_reduce)"
                       :beforedate="beforeKKlimitsInfoList[index][subIndex][subIndex1].max_reduce" :class="{'change':beforeKKlimitsInfoList[index][subIndex][subIndex1].max_reduce != item.max_reduce}"/>
            </td>
            <td style="color:red;font-weight:bold">{{item.max_odds}}</td>
          </tr>
          </template>
          </tbody>
        </table>
      </div>

      <div v-for="(list,index) in HKlimitsInfoList" :key="index" class="content-info" v-if="currtType === '香港彩'">
        <el-row class="content-info-nav">
          <button class="content-info-nav-button">
            {{HKlotteryTypeInfo[index]}}
          </button>
        </el-row>
        <table class="myTable">
          <thead>
          <tr>
            <th>
              玩法
            </th>
            <th>
              额度
            </th>
            <th>
              自动降赔值
            </th>
            <th>
              固定赔差
            </th>
            <th>
              最大降赔值
            </th>
            <th>
              最高赔率
            </th>
          </tr>
          </thead>
          <tbody>
          <template v-for="(subList,subIndex) in list">
            <tr v-for="(item,subIndex1) in subList" :key="item.item_id">
              <td class="specificTableTd" v-if="subIndex1 === 0" :rowspan="subList.length">
                {{HKlotteryTypeInfo[index].subTitle[subIndex].title}}
              </td>
              <td>{{item.name?item.name:'--'}}</td>
              <td v-if="subIndex1 === 0" :rowspan="subList.length">
                <input type="text" v-model="item.real_amount"
                       @change="changeCellInput(2, item.game, item.item_id, 1, HKlotteryTypeInfo[index].subTitle[subIndex].title, HKlotteryTypeInfo[index], item.name, item.real_amount)"
                       :beforedate="beforeHKlimitsInfoList[index][subIndex][subIndex1].real_amount" :class="{'change':beforeHKlimitsInfoList[index][subIndex][subIndex1].real_amount != item.real_amount}"/>
              </td>
              <td><input type="text" v-model="item.reduce_unit"
                         @change="changeCellInput(2, item.game, item.item_id, 2, HKlotteryTypeInfo[index].subTitle[subIndex].title, HKlotteryTypeInfo[index], item.name, item.reduce_unit)"
                         :beforedate="beforeHKlimitsInfoList[index][subIndex][subIndex1].reduce_unit" :class="{'change':beforeHKlimitsInfoList[index][subIndex][subIndex1].reduce_unit != item.reduce_unit}"/>
              </td>
              <td><input type="text" v-model="item.base_odds" disabled
                         @change="changeCellInput(2, item.game, item.item_id, 3, HKlotteryTypeInfo[index].subTitle[subIndex].title, HKlotteryTypeInfo[index], item.name, item.base_odds)"
                         :beforedate="beforeHKlimitsInfoList[index][subIndex][subIndex1].base_odds" :class="{'change':beforeHKlimitsInfoList[index][subIndex][subIndex1].base_odds != item.base_odds}"/>
              </td>
              <td><input type="text" v-model="item.max_reduce"
                         @change="changeCellInput(2, item.game, item.item_id, 4, HKlotteryTypeInfo[index].subTitle[subIndex].title, HKlotteryTypeInfo[index], item.name, item.max_reduce)"
                         :beforedate="beforeHKlimitsInfoList[index][subIndex][subIndex1].max_reduce" :class="{'change':beforeHKlimitsInfoList[index][subIndex][subIndex1].max_reduce != item.max_reduce}"/>
              </td>
              <td style="color:red;font-weight:bold">{{item.max_odds}}</td>
            </tr>
          </template>
          </tbody>
        </table>
      </div>
    </div>

    <el-row class="baseOdd-bottom">
      <button @click="subBtn">确认</button>
      <button @click="cancelBtn">取消</button>
    </el-row>

    <el-dialog
      title="用户提示"
      :visible.sync="dialogVisible"
      width="30%">
      <ul class="myDialog">
        <li>
          <span>{{messTip}}</span>
        </li>
        <li>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </li>
      </ul>
    </el-dialog>

  </div>
</template>

<script>
  import { user as userMap } from '@/utils/map' // 参数映射
  import { Message } from 'element-ui'
  export default {
    name: 'OddsReduces',
    methods: {
      // 文本框输入
      changeCellInput(czl, name, item_id, xe_id, title, cz, names, value) {
        console.log('uuuu', this.listKK)
        if (names === '' || names === null) {
          names = null
        }
        // console.log('qqqqqq', names)
        // 快开彩 开始
        if (czl === 1) {
          for (const key in this.listKK) {
            if (key === cz) {
              for (const k in this.listKK[key]) {
                if (k === title) {
                  // console.log('aaaa', this.listKK[key][k])
                  if (xe_id === 1 || names === null) {
                    for (const kk in this.listKK[key][k]) {
                      // console.log(this.listKK[key][k][kk])
                      this.formlist.params.push({
                        k: name + '_' + this.listKK[key][k][kk]['item_id'] + '_' + xe_id,
                        v: value,
                      })
                    }
                  } else {
                    this.formlist.params.push({ k: name + '_' + item_id + '_' + xe_id, v: value })
                  }
                }
              }
            }
          }
          // 结束
          // 香港彩
        } else {
          for (const key in this.listHK) {
            if (key === cz) {
              for (const k in this.listHK[key]) {
                if (k === title) {
                  // console.log('aaaa', this.listKK[key][k])
                  if (xe_id === 1 || names === null) {
                    for (const kk in this.listHK[key][k]) {
                      // console.log(this.listKK[key][k][kk])
                      this.formlist.params.push({
                        k: name + '_' + this.listHK[key][k][kk]['item_id'] + '_' + xe_id,
                        v: value,
                      })
                    }
                  } else {
                    this.formlist.params.push({ k: name + '_' + item_id + '_' + xe_id, v: value })
                  }
                }
              }
            }
          }
        }
      },
      // 取消 还原数值
      cancelBtn() {
        this.KKlimitsInfoList = JSON.parse(JSON.stringify(this.beforeKKlimitsInfoList))
        this.HKlimitsInfoList = JSON.parse(JSON.stringify(this.beforeHKlimitsInfoList))
      },
      // 确认事件
      subBtn() {
        console.log(this.formlist)
        if (this.formlist.params.length !== 0) {
          if (window.confirm('你确定要提交修改吗？')) {
            // console.log(this.formlist.params.length === 0)
            // console.log(this.formlist)
            this.$store.dispatch('SaveOddsReduces', this.formlist)
              .then(response => {
                Message.success(response.message)
              })
            return true
          } else {
            return false
          }
        } else {
          Message.success('请先修改数据')
        }
      },
      // 获取降赔
      getLimits() {
        this.lotteryType = []

        this.KKlimitsInfoList = []
        this.KKlotteryTypeInfo = []

        this.HKlimitsInfoList = []
        this.HKlotteryTypeInfo = []

        this.beforeHKlimitsInfoList = []
        this.beforeHKlotteryTypeInfo = []

        this.beforeKKlimitsInfoList = []
        this.beforeKKlotteryTypeInfo = []

        this.$store.dispatch('GetOddsReduces')
          .then(response => {
            this.limitsInfo = response
            for (const key in response) {
              if (key !== 'message') {
                this.lotteryType.push(key)
                if (key === '快开彩') {
                  this.currtType = key
                }
              }
              if (key === '快开彩') {
                this.listKK = JSON.parse(JSON.stringify(response[key]))
                for (const upIndex in response[key]) {
                  const temp = []
                  const subTitle = []
                  let tempTitle = {}
                  for (const index in response[key][upIndex]) {
                    const subTemp = []
                    for (const subIndex in response[key][upIndex][index]) {
                      subTemp.push(response[key][upIndex][index][subIndex])
                      if (!response[key][upIndex][index][subIndex].name) {
                        break
                      }
                    }
                    temp.push(subTemp)
                    tempTitle = {
                      title: index,
                      rowSpan: subTemp.length,
                    }
                    subTitle.push(tempTitle)
                  }
                  const typeTemp = {
                    title: upIndex,
                    subTitle: subTitle,
                  }
                  this.KKlotteryTypeInfo.push(typeTemp)
                  this.KKlimitsInfoList.push(temp)

                  this.beforeKKlimitsInfoList = JSON.parse(JSON.stringify(this.KKlimitsInfoList))
                  this.beforeKKlotteryTypeInfo = JSON.parse(JSON.stringify(this.KKlotteryTypeInfo))
                }
              } else {
                this.listHK = JSON.parse(JSON.stringify(response[key]))
                for (const upIndex in response[key]) {
                  const temp = []
                  const subTitle = []
                  let tempTitle = {}
                  for (const index in response[key][upIndex]) {
                    const subTemp = []
                    for (const subIndex in response[key][upIndex][index]) {
                      subTemp.push(response[key][upIndex][index][subIndex])
                      if (!response[key][upIndex][index][subIndex].name) {
                        break
                      }
                    }
                    temp.push(subTemp)
                    tempTitle = {
                      title: index,
                      rowSpan: subTemp.length,
                    }
                    subTitle.push(tempTitle)
                  }
                  const typeTemp = {
                    title: upIndex,
                    subTitle: subTitle,
                  }
                  this.HKlotteryTypeInfo.push(typeTemp)
                  this.HKlimitsInfoList.push(temp)

                  this.beforeHKlimitsInfoList = JSON.parse(JSON.stringify(this.HKlimitsInfoList))
                  this.beforeHKlotteryTypeInfo = JSON.parse(JSON.stringify(this.HKlotteryTypeInfo))
                }
              }
            }
            console.log('00000000000', this.KKlimitsInfoList, this.KKlotteryTypeInfo)
          })
      },
    },
    created() {
      this.getLimits()
      for (const key in this.quickSetup) {
        for (const index in this.userMap.commissionType) {
          this.quickSetup[key][this.userMap.commissionType[index].field] = this.userMap.commissionType[index].max
        }
      }
      console.log('0000000000000000', this.quickSetup)
    },
    data() {
      return {
        dialogVisible: false, // 弹窗提示
        messTip: '', // 提示信息

        lotteryTypeindex: 0, // 彩票子标题索引
        userMap: userMap, // 用户参数映射
        limitsInfo: '', // 降赔数据
        lotteryType: [], // 彩票类别
        currtType: '', // 当前选中的类别
        HKlimitsInfoList: [], // 降赔数据处理后,香港彩
        HKlotteryTypeInfo: [], // 处理后的彩票种类，小类别，香港彩

        KKlimitsInfoList: [], // 降赔数据处理后，小类别，快开彩
        KKlotteryTypeInfo: [], // 处理后的彩票种类，小类别，快开彩

        beforeHKlimitsInfoList: [], // 降赔数据处理后,香港彩
        beforeHKlotteryTypeInfo: [], // 修改前处理后的彩票种类，小类别，香港彩

        beforeKKlimitsInfoList: [], // 修改前降赔数据处理后，小类别，快开彩
        beforeKKlotteryTypeInfo: [], // 修改前处理后的彩票种类，小类别，快开彩
        listKK: [],
        listHK: [],
        formlist: {
          'params': [],
        },
        quickSetup: {
          haoma: [], // 游戏大类分类/号码类
          liangmian: [], // 游戏大类分类/两面类
          duoxiang: [], // 游戏大类分类/多项类
          lianma: [], // 游戏大类分类/连码类
          qita: [], // 游戏大类分类/其它
        },
      }
    },
  }
</script>

<style scoped>
  .bread-nav {
    height: 30px;
    font-size: 13px;
    line-height: 30px;
    background: #ECEFF2;
    border-bottom: 1px solid #d0dff2;
    padding: 0 0 0 10px;
    overflow: hidden;
  }

  .bread-nav-title {
    color: #386399;
    font-weight: bold;
    float: left;
    background: url("../../../../static/agent/img/tb.png") no-repeat left center;
    padding-left: 20px;
  }

  .bread-nav-title-right{
    float:right;
  }
  .bread-nav-title-right button{
    border: 0;
    background-color: rgba(0,0,0,0);
    height:30px;
    line-height: 30px;
    color:#386399;
    font-weight: bold;
  }
  .bread-nav-title-right button:hover{
    text-decoration: underline;
  }
  .content{
    padding: 10px;
  }
  .content-info{
    width: 100%;
    padding-top: 20px;
  }
  .content-info-first-child{
    padding-top: 5px !important;
  }
  .content-info-nav{
  }
  .lotteryBtn:first-child{
    margin-left: 10px;
  }
  .content-info-nav hr{
    margin:0;
  }
  .content-info-nav-button{
    color:#ff8c3f;
    border:0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-color: #386bad;
    height:30px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: bold;
    min-width: 100px;
  }
  .content-info-nav-button:hover{
    text-decoration: underline;
  }
  .upTable{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .upTable td{
    vertical-align: top;
    width: 50%;
  }

  .myTable{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .myTable th {
    box-shadow: inset 0px -14px 19px 2px #CAE8F6;
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }

  .myTable td {
    height: 25px;
    text-align: center;
    color: #131950;
    line-height: 25px;
    font-size: 14px;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid #B9C2CB;
  }
  .specificTableTd{
    padding-left: 10px !important;
    padding-right: 0 !important;
    background-color: #f2f2f2 !important;
  }
  .myTable tr:hover {
    background-color: #CAE8F6;
  }
  .myTable td input[type='text']{
    width:80px;
    display:inline-block;
    height:20px;
    font-weight: lighter;
    margin: 0 10px;
    border: #b0b0b0 1px solid;
    padding: 0;
  }

  .baseOdd-bottom{
    text-align: center;
    margin-top: 20px;
  }
  .baseOdd-bottom button{
    width: 86px;
    height: 31px;
    line-height: 26px;
    color: #eeeeee;
    border: 0;
    background-color: #487BD1;
    border-radius: 5px;
  }
  .baseOdd-bottom button:hover{
    background-color: #7bb1d0;
    color:#fff100;
  }

  .change{
    background-color: #8eff7a;
  }
  .lotteryTypeSelected{
    background-color: #dcdcdc !important;
    color:#535353 !important;
  }
  .lotteryTypeBtn{
    color:#FFF !important;
  }
</style>
